<template>
  <div id="sold-line-chart" ref="soldLineChart"></div>
</template>

<script>
import { getItemSaleWeeklyQuantity } from '@/api/purchase'

export default {
  name: 'SoldLineChart',
  data() {
    const option = {
      title: {
        text: this.$t('product_purchase_cmpts_soldlinechart_169')
      },
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [this.$t('product_purchase_cmpts_soldlinechart_170'), this.$t('product_purchase_cmpts_soldlinechart_171'), this.$t('product_purchase_cmpts_soldlinechart_172'), this.$t('product_purchase_cmpts_soldlinechart_173'), ]
      },
      yAxis: {
        type: 'value'
      },
    };
    return {
      option: {
        ...option,
        productNames: [],
        quantitySeries: [],

      }
    }
  },
  methods: {
    init() {
      getItemSaleWeeklyQuantity().then(res => {
        const {data: {productNames, quantityMap}} = res;
        const optionSegment = {
          legend: {
            data: []
          },
          series: []
        }
        optionSegment.legend.data = productNames;
        optionSegment.series = Object.entries(quantityMap).map(([key, value]) => ({
          name: key,
          type: 'line',
          stack: 'Total',
          data: value.reverse()
        }))
        this.option = {...this.option, ...optionSegment};
        // console.log(this.option)
        // cake: 底层采用获取dom树，created期间无真实dom，初始化失败
        const echart = this.$echarts.init(this.$refs.soldLineChart)
        echart && echart.setOption(this.option)
        echart.resize({
          height: 400
        })
      })

    }
  },
  mounted() {
    this.init();
  }
}
</script>

<style lang="scss" scoped>
#sold-line-chart {
  height: 400px;
}
</style>
